<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            需求：
            1.点击li背景就会变为红色
            2.点击btn1就添加一个li
            */
            
            //1.点击li背景就会变为红色
            var $ul_li_all=$("ul>li");
            $ul_li_all.click(function(){
                $ul_li_all.css("background-color","red");
            })

            //2.点击btn1就添加一个li
            var $ul=$("ul");
            var $button_btn=$(":button#btn");
            $button_btn.click(function(){
                $ul.append("<li>新增li</li>");
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>11111</li>
        <li>1111111</li>
        <li>111111111</li>
        <li>11111111111</li>
    </ul>

    <li>22222</li>
    <br>
    <button id="btn">添加新的li</button>
    <br>
    <!--
        绑定事件监听的问题：新加的元素没有监听
    -->
</body>
</html>